<template>
  <div id="app">
    <div class="container" :style="containerStyles">
      <header>
        <div class="header">
          <div class="header-left">
            <span>堡垒机交易日志分析区块</span>
          </div>
          <div class="header-right">
            <div class="nav">
              <a href="/">首页</a>
            </div>
          </div>
          <div class="header-middle">
            <p><img src="../assets/logo2.png" /></p>
            <div class="header-search">
              <form action="javascript:void(0);" @submit.prevent="find">
                <input
                  type="text"
                  id="hashInput"
                  placeholder="区块高度、交易哈希"
                  class="search-input"
                />
                <button class="search-btn" type="submit"></button>
              </form>
            </div>
          </div>
        </div>
      </header>

      <section class="container">
        <div class="container-box">
          <div class="main-box">
            <div class="main-box-header bd-bottom">
              <div class="title">
                所属区块：<span :style="{ color: blockIndex > 0 ? 'blue' : 'black', fontWeight: 'bold' }">{{ blockIndex }}</span> ，可查看的交易：
              </div>
              <div class="more">
                <a href="javascript:void(0);" @click="navigateBlock(0)"><<前一个区块</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0);" @click="navigateBlock(1)">后一个区块>></a>
              </div>
            </div>
            <div id="content" class="main-box-content">
              <div>
                <div class="jiaoyi">
                  <div class="jiaoyi-item">
                    <div>hash值</div>
                    <div>jsoncreatetime</div>
                    <div>type</div>
                  </div>
                  <!-- 展示交易列表 -->
                  <div
                    v-for="(tx, index) in transactions"
                    :key="tx.hashNo"
                    class="jiaoyi-item"
                    @click="showTransactionDetail(tx)"
                  >
                    <div>{{ tx.hashNo }}</div>
                    <div>{{ tx.jsoncreatetime }}</div>
                    <div>{{ tx.type }}</div>
                  </div>
                </div>
              </div>

              <div class="main-box">
                <div class="main-box-header bd-bottom">
                  <div class="title">交易详情：</div>
                </div>
              <!-- 交易详情区域始终存在 -->
              <div id="detail" class="assets-detail-cont">

                <div v-if="selectedTransaction">
                  <div class="transaction-item">
                    <p><strong>发送方：</strong>{{ selectedTransaction.from }}</p>
                    <p><strong>接收方：</strong>{{ selectedTransaction.to }}</p>
                    <p><strong>交易哈希：</strong>{{ selectedTransaction.hashNo }}</p>
                    <p><strong>交易类型：</strong>{{ selectedTransaction.type }}</p>
                    <p><strong>交易内容：</strong>{{ selectedTransaction.content }}</p>
                    <p><strong>创建时间：</strong>{{ selectedTransaction.jsoncreatetime }}</p>
                    <p><strong>签名：</strong>{{ selectedTransaction.sign }}</p>
                    <p><strong>详细对象：</strong>{{ selectedTransaction.objToString }}</p>
                  </div>
                </div>
                <div v-else>
                  <p>点击交易查看相关交易信息。</p>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlockExplorer',
  data() {
    return {
      blockIndex: 0,  // 当前区块的高度
      selectedTransaction: null, // 用来存储选择的交易详情
      transactions: [], // 存储查询到的交易列表
      background: require('../assets/background.jpg'),
    };
  },
  computed: {
    containerStyles() {
      return {
        backgroundImage: `url(${this.background})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      };
    }
  },
  methods: {
  // 搜索区块或交易
  async find() {
    const input = document.getElementById('hashInput');
    const indexhash = input.value.trim();  // 获取输入框中的区块高度或交易哈希
    console.log("Searching for: ", indexhash);

    const queryIndex = indexhash || this.blockIndex;
    input.value = '';
    this.selectedTransaction = null;
    // 使用 fetch API 请求数据
    try {
      const response = await fetch(`http://192.168.231.31:8001/block/getBlockDetail?blockIndex=${queryIndex}`);
      if (!response.ok) {
        throw new Error(`API 返回错误：${response.status}`);
      }

      const data = await response.json();  // 假设返回的数据结构是：{ blockIndex: 123, transactions: [...] }
      console.log("API Response:", data);  // 打印返回的数据

      this.render(data);  // 处理返回的数据并渲染
    } catch (error) {
      console.error("Error fetching data:", error);
      alert(`数据请求失败：${error.message}`);
    }
  },

  // 渲染返回的数据
  render(data) {
    if (data.o) {
      this.blockIndex = data.o.blockIndex;  // 获取区块高度

      // 解析交易数据（dataJson字段是一个JSON字符串）
      const transactions = JSON.parse(data.o.dataJson || '[]');  // 解析交易数据
      this.transactions = transactions.map(tx => ({
        from: tx.from,  // 发送方
        to: tx.to,  // 接收方
        hashNo: tx.hashNo,  // 交易哈希
        type: tx.type,  // 交易类型
        content: tx.content,  // 交易内容
        jsoncreatetime: tx.jsoncreatetime,  // 创建时间
        sign: tx.sign,  // 签名
        objToString: tx.objToString,  // 详细对象转字符串
      }));
    }
  },

  // 点击交易项时显示交易详情
  showTransactionDetail(tx) {
    this.selectedTransaction = tx;  // 设置当前选中的交易
  },

  // 区块导航方法（前一个区块或后一个区块）
  navigateBlock(direction) {
  // 确保 blockIndex 是一个整数
  this.blockIndex = parseInt(this.blockIndex, 10);
  this.selectedTransaction = null;

  if (direction === 0) {
    this.blockIndex = this.blockIndex - 1;
  } else {
    this.blockIndex = this.blockIndex + 1;
  }

  // 防止区块索引为负数
  if (this.blockIndex < 0) {
    alert("已经是最早的区块！");
    this.blockIndex = 0;
  }
  console.log("Navigating to block: ", this.blockIndex);
  this.find();
}
},

mounted() {
  // 初始化区块索引
  const hash = new URLSearchParams(window.location.search).get('hash');
  if (hash) {
    this.blockIndex = parseInt(hash, 10); // 获取 URL 中的 hash 参数并设置 blockIndex
    this.find();  // 如果有 hash 参数则自动搜索
  }
}

};
</script>


<style>
/* Your styles here */
.container {
  height: 100vh; /* 使div占满整个视口高度 */
  width: 100%;   /* 使div占满整个视口宽度 */
  justify-content: center;
  align-items: center;
  text-align: center;
}

.header {
  width: 100%;
  height: 300px;
  /* background: linear-gradient(120deg,#226de5,#0dbea6); */
  background: url(../assets/bg.jpg) no-repeat center bottom;
  background-size: cover;
  width: 1280px;
  height: 350px;
  margin: 0 auto;
  padding: 40px 0;
}

.header-left {
  float: left;
  font-size: 24px;
  color: #2e84f5;
  padding-right: 15px;
}

.header-middle {
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
  text-align: center;
}

header .header .header-middle p img {
  width: 300px;
  margin-bottom: 25px;
}

header .header .header-middle .header-search {
  position: relative;
  display: inline-block;
  height: 42px;
  background-color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 500px;
}

header .header .header-middle .header-search .search-input {
  width: calc(100% - 38px);
  height: 38px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  box-sizing: border-box;
}

header .header .header-middle .header-search .search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  border-left: 1px solid #eee;
  background: url(../assets/icon_search.png) no-repeat 50% 50%;
  background-size: 15px 15px;
  cursor: pointer;
}

header .header .header-right {
  vertical-align: middle;
  text-align: right;
  float: right;
}

header .header .header-right .nav {
  display: inline-block;
}

header .header .header-right .nav a {
  font-size: 20px;
  color: rgba(39, 78, 253, 0.7);
  margin-left: 15px;
  margin-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}

header .header .header-right .nav a.nowin {
  color: #fff;
}

header .header .header-right .nav a.active {
  color: rgb(255, 255, 255, 1);
  border-bottom: 1px solid #fff;
}

header .header .header-right .nav a:hover {
  color: rgb(158, 201, 250);
  border-bottom: 1px solid #fff;
}

footer {
  padding: 10px 0;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  background: #2c78f3;
}

footer .footer {
  width: 1180px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.box-shadow {
  box-shadow: 6px 4px 8px 0 hsla(0, 0%, 6%, 0.02);
}

.container {
  width: 100%;
  padding-bottom: 70px;
}

.container .container-box {
  width: 1180px;
  margin: 0 auto;
}

.mainbcon {
  display: flex;
  align-items: center;
}

.maintwo {
  flex: 1;
  text-align: center;
}

.mainThree {
  width: 20%;
}

.maincont {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.main-boxb {
  width: 100%;
  background: #fff;
  padding: 20px 20px 10px 20px;
  margin-right: 1%;
  float: left;
}

.main-boxb:last-child {
  margin-right: 0;
  margin-left: 1%;
}

.main-box {
  width: 100%;
  background: #fff;
  padding: 20px;
  margin-top: 20px;
}

.main-box-conta {
  width: 100%;
  overflow: hidden;
  background: #fff;
  height: 458px;
  margin-top: 42px;
}

.mainbcon {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #eaeaea;
}

.main-box-conta div.mainbcon div.mainone {
  background: #1384fe;
  padding: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  width: 15%;
  box-shadow: 0 0 3px #09d6eb;
  margin: 3px 4% 3px 1%;
}

.main-box-conta div p {
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
}

.main-box-conta div em {
  padding: 0 6px;
  font-size: 16px;
}

.main-box-conta div span {
  width: 100%;
  overflow: hidden;
  color: #fff;
  display: block;
}

.mainbcon .maintwo {
  line-height: 54.5px;
  font-size: 15px;
}

.main-boxa {
  width: 100%;
  margin-top: 20px;
}

.main-box .main-box-header {
  display: table;
  width: 100%;
  vertical-align: middle;
}

.main-box .main-box-header .title,
.main-boxb .main-box-header .title {
  display: flex;
  vertical-align: middle;
  font-size: 20px;
  color: #000;
}

.main-box .main-box-header .title::before,
.main-boxb .main-box-header .title::before {
  display: inline-block;
  content: "";
  width: 3px;
  height: 20px;
  background-color: #226de5;
  margin-right: 10px;
  vertical-align: middle;
  margin-bottom: 5px;
}

.main-box .main-box-header .title span {
  color: #555;
}

.main-box .main-box-header .title label {
  color: #226de5;
}

.main-box .main-box-header .more {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.main-box .main-box-header .more a {
  font-size: 18px;
  color: #226de5;
}

/* Other styles can go here */
.jiaoyi {
  width: 100%;
  display: table;
  margin-top: 20px;
}
.jiaoyi .jiaoyi-item {
  display: table-row;
}
.jiaoyi-item img {
  max-height: 200px;
}
.jiaoyi .jiaoyi-item > div {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  min-width: 100px;
  max-width: 300px;
}
.jiaoyi .jiaoyi-item:nth-child(2n + 1) {
  background-color: #f8f8f8;
}
.jiaoyi .jiaoyi-item:nth-child(1) > div {
  color: #666;
  text-overflow: ellipsis;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.jiaoyi .jiaoyi-item > div a {
  color: #226de5;
  cursor: pointer;
}
.jiaoyi .jiaoyi-item > div a:hover {
  text-decoration: underline;
}
.jiaoyi .jiaoyi-item > div span {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.jiaoyi .jiaoyi-item > div label {
  display: inline-block;
  height: 24px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #226de5;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  margin-left: 5px;
}
.jiaoyi .jiaoyi-item:nth-child(n + 1):hover {
  background-color: #f6f7fa;
}
.jiaoyi-more {
  width: 100%;
  text-align: right;
  overflow: hidden;
}
.jiaoyi-more a {
  font-size: 14px;
  color: #226de5;
}

/* No detail message */
.nodetail {
  width: 100%;
  text-align: center;
  color: #aaa;
  font-size: 13px;
}

/* Load more button */
.loadmore {
  width: 200px;
  height: 40px;
  text-align: center;
  color: #909085;
  font-size: 13px;
}

/* Enterprise name container */
.qymc1 {
  display: flex;
  width: 500px;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  padding-left: 19px;
}

/* Transaction item styling */
.jiaoyi .jiaoyi-item > div {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  min-width: 100px;
  max-width: 280px;
}

.transaction-item {
  background-color: #fff; /* 背景颜色，设置为白色 */
  border: 1px solid #e0e0e0; /* 边框颜色 */
  padding: 20px; /* 内边距 */
  margin-bottom: 15px; /* 下边距 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  text-align: left; /* 设置左对齐 */
}

.transaction-item p {
  font-size: 15px; /* 字体大小 */
  margin-bottom: 10px; /* 每个段落之间的间距 */
  line-height: 1.6; /* 行高，提升可读性 */
  color: #333; /* 文本颜色 */
}

.transaction-item strong {
  color: #007bff; /* 强调部分文字的颜色，设置为蓝色 */
  font-weight: bold; /* 加粗 */
}

.transaction-item p:last-child {
  margin-bottom: 0; /* 最后一行去掉下边距 */
}

.transaction-item p:not(:last-child) {
  border-bottom: 1px solid #f1f1f1; /* 每行文字之间增加分隔线，除了最后一行 */
  padding-bottom: 10px; /* 给每个段落增加一点下边距 */
}

.transaction-item p strong {
  width: 120px;
  display: inline-block; /* 保证标签的宽度统一 */
  margin-right: 10px; /* 标签和内容之间增加一些间距 */
}

.transaction-item .transaction-item-content {
  margin-top: 15px;
  font-size: 13px;
  color: #666; /* 更加柔和的字体颜色 */
}

.transaction-item .transaction-item-content p {
  margin-bottom: 8px;
}

/* Enterprise info styling */
.gd {
  width: 200px;
  height: 40px;
  background-color: #226de5;
  margin: 10px auto;
  color: #fff;
  font-size: 16px;
  display: block;
}
</style>
